<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>后台-订单</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet"
	href="layui/css/layui.css"
	media="all">
<link rel="stylesheet"
	href="font-awesome-4.7.0/css/font-awesome.css" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	 <div>
		
		<div>
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
				
				<div class="demoTable">
					<select class="layui-select" id="select">
						<option value="用户名">用户名</option>
						<option value="电影名">电影名</option>
					</select>
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload" placeholder="请输入关键字"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
					<div class="layui-inline">
    			 		<label class="layui-form-label"  style="width:95px;">下单日期范围</label>
     			 		<div class="layui-input-inline">
      			 			 <input type="text" class="layui-input" id="test6" autocomplete="off">
     			 		</div>
     			 		<label style="margin-left:15px;">订单状态</label>
		     			<select class="layui-select" id="selstate" style="margin-left: 10px;">
							<option value="4">全部</option>
							<option value="1">已支付</option>
							<option value="2">待支付</option>
							<option value="3">已退款</option>
							<option value="0">已取消</option>
						</select>
   					</div>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
		
	</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">还原显示状态</a>
</script>
	<script src="layui/layui.js"
		charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script>
	layui.use(['table', 'laydate'], function() {
		
			var laydate = layui.laydate;
			var table = layui.table;
			//日期范围
			laydate.render({
			elem: '#test6'
				,range: true
				,done: function(value, date, endDate){
					//日期范围改变
				    var demoReload = $('#demoReload');
				    
				  	$.ajax({
				  		type:"GET",
				  		url:"odpage",
				  		data:{
				  			keywords : demoReload.val(),
							select : $("#select").val(),
							seldate : value,
							selstatus : $('#selstate').val()
				  		},
				  		success:function(data){
				  			
							//执行重载
							table.reload('testReload', {
								page : {
									curr : 1
								//重新从第 1 页开始
								},
								where : { //检索的条件
									//传递的参数 key为参数名 {} 内传递的是参数的值
									/* key: {
									  
									  id: demoReload.val(),
									  username :....
									} */
									//只有一个key : value格式
									keywords : demoReload.val(),
									select : $("#select").val(),
									seldate : $('#test6').val(),
									selstatus : $('#selstate').val()
								}
							});
							
				  		},
				  		dataType:"json"
				  	});
				  }
		
			});
			
			table.render({
				elem : '#test',
				url : 'odpage',//地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '订单数据表',
				cols : [ [  {
					field : 'orderid',
					title : '订单编号',
					width : 105,
					fixed : 'left',
					unresize : true,
					sort : true
				}, {
					field : 'users.userid',
					title : '用户编号',
					width : 100,
					templet : '<div>{{d.users.userid}}</div>'
				},{
					field : 'users.username',
					title : '用户名',
					width : 100,
					templet : '<div>{{d.users.username}}</div>'
				}, {
					field : 'moviename',
					title : '电影名称',
					width : 100,
					
				}, {
					field : 'schedule.playtime',
					title : '开场时间',
					width : 180,
					templet : "<div>{{layui.util.toDateString(d.schedule.playtime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
				},{
					field : 'hallname',
					title : '影厅名称',
					width : 100,
					
				},{
					field : 'seat',
					title : '座位',
					width : 160
				},
				{
					field : 'orderprice',
					title : '订单总额',
					width : 100
				},{
					field : 'ordertime',
					title : '下单时间',
					width : 180,
					templet : "<div>{{layui.util.toDateString(d.ordertime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
				},{
					field : 'paytime',
					title : '支付时间',
					width : 180,
					templet : "<div>{{layui.util.toDateString(d.paytime, 'yyyy-MM-dd HH:mm:ss')}}</div>"
				},{
					field : 'orderstatus',
					title : '订单状态',
					width : 120,
					templet : function(res) {
						if(res.orderstatus==0){
							return "已取消";
						}else if(res.orderstatus==1){
							return "已支付";
						}else if(res.orderstatus==2){
							return "待支付";
						}else if(res.orderstatus==3){
							return "已退款";
						}
					}
				}, {
					field : 'ordercondition',
					title : '订单显示状态',
					width : 120,
					templet : function(res) {
						return res.ordercondition == 0 ? "隐藏" : "显示";
					}
				},{
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 120
				}] ],
				page : true,
				id : 'testReload'
			});
			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'edit') {
					layer.confirm('真的需要还原为显示状态吗？', function(index) {

						$.ajax({
							type : "POST", //提交方式
							url : "updod", //地址和springmvc中控制器地址一致
							contentType:"application/json",
							data:JSON.stringify({
								orderid:data.orderid,
								 users: {
						                userid: data.users.userid
						            },
						         schedule: {
						                scheduleid: data.schedule.scheduleid
						            },
								ordercondition:1
							}),
							success : function(cm) {
								layer.msg(cm.msg, {
									time : 2000
								//两秒延迟
								}, function() {
									if (cm.msg == "修改成功") {

										//刷新页面
				                        window.location.reload();
				                        
									}

								});

							}
						});

					});
				} 
			});
			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					
					var demoReload = $('#demoReload');

					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : { //检索的条件
							keywords : demoReload.val(),
							select : $("#select").val(),
							seldate : $('#test6').val(),
							selstatus : $('#selstate').val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			/*修改 表单的提交 按钮的单击事件 ，监听1 */
			$(document).on("click", ".btn-update", function() {
				//可以实现 比较麻烦....
				console.log(layui.form.data);
			});
			//订单状态改变
			$("#selstate").change(function(){
				var demoReload = $('#demoReload');
			    
			  	$.ajax({
			  		type:"GET",
			  		url:"odpage",
			  		data:{
			  			keywords : demoReload.val(),
						select : $("#select").val(),
						seldate :  $("#seldate").val(),
						selstatus : $('#selstate').val()
			  		},
			  		success:function(data){
			  			
						//执行重载
						table.reload('testReload', {
							page : {
								curr : 1
							//重新从第 1 页开始
							},
							where : { //检索的条件
								//传递的参数 key为参数名 {} 内传递的是参数的值
								/* key: {
								  
								  id: demoReload.val(),
								  username :....
								} */
								//只有一个key : value格式
								keywords : demoReload.val(),
								select : $("#select").val(),
								seldate : $('#test6').val(),
								selstatus : $('#selstate').val()
							}
						});
			  		},
			  		dataType:"json"
			  	});
			  	
			});


		});
		
		
	</script>


	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>

</body>
</html>